<div class="my-line" style="margin: 0 0 20px 0"></div>

<div class="add-container" style="position:relative;">
    <textarea id="comment-input" class="comment-input" (focus)="OnInputFocus()" cols="50" rows="2" 
        (keydown)="AddCommentKeyDown($event)" (keyup)="AddCommentKeyUp($event)" placeholder="在此处添加新评论"></textarea>
    <div class="comment-publish" (click)="AddComment()">发布</div>
    <p class="notice">Alt+Enter快捷发布</p>
</div>

<p class="title">全部评论</p>
<div class="show-container" *ngFor="let comment of comments">
    <div class="comment-block" style="position: relative;">
        <div *ngIf="comment.owner=='匿名用户'" class="owner-icon" style="background-color:rgb(65, 73, 122)">匿</div>
        <div *ngIf="comment.owner!='匿名用户'" class="owner-icon">{{comment.owner[0]}}</div>
        <div class="comment-content">
            <p class="owner">{{comment.owner}}</p> 
            <div class="my-a" style="margin:0 0 0 10px;font-size: 12px;display: inline;" (click)="ShowResponse(comment)"
                *ngIf="comment.resCounts!=0">查看回复({{comment.resCounts}})</div>
            <div class="my-a" style="margin:0 0 0 10px;font-size: 12px;display: inline;" (click)="AddResponseClicked($event, comment)">回复</div>
            <div class="my-a" *ngIf="comment.owner==cookieService.get('nickname')||cookieService.get('auth').indexOf('admin') != -1"
            style="margin:0 0 0 10px;font-size: 12px;display: inline;" (click)="UpdateCommentClicked($event, comment)">编辑评论</div>
            <div class="my-a" *ngIf="comment.owner==cookieService.get('nickname')||cookieService.get('auth').indexOf('admin') != -1"
            style="margin:0 0 0 10px;font-size: 12px;display: inline;" (click)="DeleteCommentClicked(comment)">删除评论</div>
            <p class="timeStr">{{comment.timeStr}}</p>
            <p class="content" [innerHTML]="comment.content | innerHtmlPipe"></p>
        </div>
        <div *ngFor="let res of comment.response">
            <div class="my-line"></div>
            <div class="res-block" style="position: relative;">
                <div *ngIf="res.owner=='匿名用户'" class="owner-icon" style="background-color:rgb(65, 73, 122);margin-top:8px">匿</div>
                <div *ngIf="res.owner!='匿名用户'" class="owner-icon" style="margin-top:8px">{{res.owner[0]}}</div>
                <div class="res-content">
                    <p class="owner">{{res.owner}}</p> 
                    <div class="my-a" style="margin:0 0 0 10px;font-size: 12px;display: inline;" (click)="AddResponseClicked($event, res)">回复</div>
                    <div class="my-a" *ngIf="res.owner==cookieService.get('nickname')||cookieService.get('auth').indexOf('admin') != -1"
                    style="margin:0 0 0 10px;font-size: 12px;display: inline;" (click)="UpdateCommentClicked($event, res)">编辑评论</div>
                    <div class="my-a" *ngIf="res.owner==cookieService.get('nickname')||cookieService.get('auth').indexOf('admin') != -1"
                    style="margin:0 0 0 10px;font-size: 12px;display: inline;" (click)="DeleteCommentClicked(res)">删除评论</div>
                    <p class="timeStr">{{res.timeStr}}</p>
                    <p class="content" [innerHTML]="res.content | innerHtmlPipe"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="my-line"></div>
</div>